<template>
<tian-animation>
  <div
    v-if="scrollTopSize"
    @click="scrolltoTop"
    class="top"
  >
    <img width="15px" src="@assets/img/top-back.png" alt="">
    <p>Top</p>
  </div>
  </tian-animation>
</template>

<script>
import { scrollTo } from './scrollTo'
export default {
  name: "scrolltop",
  data() {
    return {
      scrollTopSize: false,
    };
  },
  created() {
    window.addEventListener("scroll", this.scrollTop);
  },
  methods: {
    scrollTop() {
      if (document.documentElement.scrollTop > 100) {
        this.scrollTopSize = true;
      } else {
        this.scrollTopSize = false;
      }
    },
    scrolltoTop(){
      scrollTo(0,800)
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollTop);
  },
};
</script>

<style lang="scss" scoped>
.top{
  width:50px;height:50px;position:fixed;right:50px;bottom:150px;
  cursor: pointer;
  border:1px solid #d4d4d4;
  background-color: #f5f5f5;
  color:#656665;
  font-size:12px;
  text-align: center;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>